<template>
  <div class="paswordManage">
    <div class="table">
      <form @submit.prevent="update">
        <div class="info">
          <span>旧密码：</span>
          <input type="password" v-model="oldPassword" required />
        </div>
        <div class="info">
          <span>新的密码：</span>
          <div class="info_box">
            <input type="password" v-model="newPassword" required />
            <span ref="errorMessage"
              >*密码要求8-20位,至少包含数字、字母(大小写字母必须都要有)两种元素</span
            >
          </div>
        </div>
        <div class="info">
          <span>确认新的密码：</span>
          <input type="password" v-model="confirmPassword" required />
        </div>
        <button type="submit" class="updatePasswordBtn">保存</button>
      </form>
    </div>
  </div>
</template>

<script>
import { updatePassword } from "@/api/all";
import { mapState, mapMutations } from "vuex";
import { Message } from "element-ui";
export default {
  data() {
    return {
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    };
  },
  computed: {
    ...mapState("login", ["username"]),
  },
  watch: {
    newPassword(newVal, oldVal) {
      const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,20}$/;
      if (!regex.test(newVal) && newVal !== "")
        this.$refs.errorMessage.style.color = "red";
      else this.$refs.errorMessage.style.color = "#7b7a7a";
    },
  },
  methods: {
    async update() {
      if (this.newPassword !== this.confirmPassword) {
        Message.error("新密码与确认密码不一致，请重新输入！");
      }
      else{
      const params = {
        username: this.username,
        oldPassword:this.oldPassword,
        newPassword: this.newPassword,
      };
      await updatePassword(params)
        .then((res) => {
          if (res.data.code === 200) {
           if(res.data.message=="Ok"){
            Message.success("密码修改成功！即将为您跳转到登录页面...")
            setTimeout(()=>{
              localStorage.clear();
              this.$router.push({ name: "login" }); //用户登录成功后跳转
            },3000)
           }
           else Message.error(res.data.data.message)
          }
        })
        .catch((error) => {
          console.log(error);
        });
      }
    },
  },
};
</script>

<style scoped>
.paswordManage {
  height: 70vh;
  width: 90%;
  background: #f7f8f8;
  margin: 0px auto;
  border-radius: 5px;
  display: flex;
}
.table {
  display: flex;
  height: 400px;
  width: auto;
  flex-direction: column;
  align-items: center; /* 垂直居中 */
  justify-content: center;
  margin-left: 50px;
}
.info {
  flex: 1;
  height: 70px;
  width: auto;
  min-width: 800px;
}
.info span {
  display: block;
  height: 30px;
  line-height: 30px;
  color: #2c2c2c;
  font-size: 16px;
}
.info_box span {
  display: inline-block;
  margin-left: 30px;
  color: #7b7a7a;
  font-size: 14px;
}
.info-box input,
.info input {
  height: 30px;
  padding: 5px;
  color: #4a4949;
  border: 1px solid #c0c0c0;
  border-radius: 10px;
  width: 200px;
  font-size: 14px;
  color: #666666;
  vertical-align: middle;
}
.updatePasswordBtn {
  background: rgb(45, 86, 82);
  color: #fff;
  width: 120px;
  height: 35px;
  border-radius: 8px;
  margin: 20px auto;
  border: 1px solid #215c3d;
  transition: all 0.3s;
}
.updatePasswordBtn:hover {
  cursor: pointer;
  background: rgb(55, 105, 101);
}
</style>